<template>
	<view class="page">
		
		<view class="search">
			<view class="input" style="width: 82%;border-radius: 100rpx; padding: 10rpx 20rpx 10rpx 40rpx; display: flex;align-items: center; background-color:  #e9e9eb; ">
				<image src="../../static/icon/放大镜.png" style="height: 40rpx;width: 40rpx;margin-right: 20rpx;"></image>
				<input type="text" placeholder="搜索">
			</view>
			<image src="../../static/icon/moon.png" class="moon"></image>
		</view>
		
		<scroll-view id="tab-bar" class="tabbar" :scroll-x="true" :show-scrollbar="false" >
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="tab-item" :id="tab.id" @click="tabclick(index)">
				<view class="tab-item-item">
					<text class="tab-item-title" :class="tabIndex == index ? 'tab-item-title-active' : ''">{{tab.name}}</text>
					<text class="tab-item-bottom" :class="tabIndex == index ? 'tab-item-bottom-active' : ''">一</text>
				</view>
			</view>
		</scroll-view>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" >
					<swiper-item>
						<img-group :options="newsData[0]"></img-group>
					</swiper-item>
					<swiper-item>
						<img-group :options="newsData[1]"></img-group>
					</swiper-item>
					<swiper-item>
						<img-group :options="newsData[2]"></img-group>
					</swiper-item>
					<swiper-item>
						<img-group :options="newsData[3]"></img-group>
					</swiper-item>
		</swiper>
		
		<view class="hot-activity">
			<view class="title" >
				<image src='../../static/icon/热门.png' style="width: 50rpx;height:50rpx;margin-right: 10rpx"></image>
				<text>热门活动</text>
			</view>
			<view class="line" />
			<view class="hot-content">
				<view class="content">
					<image src='../../static/icon/运动.png' style="width: 80rpx;height:80rpx;"></image>
					<text style="font-size: 14rpx;font-weight: 100;">运动</text>
				</view>
				<view class="content">
					<image src='../../static/icon/学习.png' style="width: 80rpx;height:80rpx;"></image>
					<text style="font-size: 1rpx;font-weight: 100;">学习读书</text>
				</view>
				<view class="content">
					<image src='../../static/icon/户外.png' style="width: 80rpx;height:80rpx;"></image>
					<text style="font-size: 14rpx;font-weight: 100;">旅游</text>
				</view>
				<view class="content">
					<image src='../../static/icon/社团.png' style="width: 80rpx;height:80rpx;"></image>
					<text style="font-size: 14rpx;font-weight: 100;">社团活动</text>
				</view>
				<view class="content">
					<image src='../../static/icon/汽车.png' style="width: 80rpx;height:80rpx;"></image>
					<text style="font-size: 14rpx;font-weight: 100;">拼车</text>
				</view>
			</view>
			<view class="activity-content">
				
				<view class="activity-introduction">
					<image :src="activity[0].image_url" style="width:270rpx; height: 270rpx; border-radius: 20rpx;margin-right: 20rpx"></image>
					<view class="content">
						<text style="color:rgba(148, 154, 169, 1)">{{activity[0].style}}</text>
						<text style="width: 400rpx">{{activity[0].title}}</text>
						<view class="footer">
							<image :src="activity[0].user_avator" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;margin-right: 20rpx;"></image>
							<text style="color:rgba(148, 154, 169, 1);margin-right: 20rpx;">{{activity[0].user_name}}</text>
							<text style="color:rgba(148, 154, 169, 1);margin-right: 20rpx;">{{activity[0].time}}</text>
						</view>
					</view>
				</view>
				<view class="line" style="margin: 20rpx 20rpx 20rpx 300rpx ;width: 55%"></view>
				
				<view class="activity-introduction">
					<image :src="activity[1].image_url" style="width:270rpx; height: 270rpx; border-radius: 20rpx;margin-right: 20rpx"></image>
					<view class="content">
						<text style="color:rgba(148, 154, 169, 1)">{{activity[1].style}}</text>
						<text style="width: 400rpx">{{activity[1].title}}</text>
						<view class="footer">
							<image :src="activity[1].user_avator" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;margin-right: 20rpx;"></image>
							<text style="color:rgba(148, 154, 169, 1);margin-right: 20rpx;">{{activity[1].user_name}}</text>
							<text style="color:rgba(148, 154, 169, 1);margin-right: 20rpx;">{{activity[1].time}}</text>
						</view>
					</view>
				</view>
				<view class="line" style="margin: 20rpx 20rpx 20rpx 300rpx ;width: 55%"></view>
				
				<view class="activity-introduction">
					<image :src="activity[2].image_url" style="width:270rpx; height: 270rpx; border-radius: 20rpx;margin-right: 20rpx"></image>
					<view class="content">
						<text style="color:rgba(148, 154, 169, 1)">{{activity[2].style}}</text>
						<text style="width: 400rpx">{{activity[2].title}}</text>
						<view class="footer">
							<image :src="activity[2].user_avator" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;margin-right: 20rpx;"></image>
							<text style="color:rgba(148, 154, 169, 1);margin-right: 20rpx;">{{activity[2].user_name}}</text>
							<text style="color:rgba(148, 154, 169, 1);margin-right: 20rpx;">{{activity[2].time}}</text>
						</view>
					</view>
				</view>
			</view>		
		</view>
		
		<view class="activity" style="padding: 20rpx; background-color: #FFFFFF;">
			<view class="activity-item" style=" display: flex; flex-flow: column nowrap; border-radius: 30rpx;margin-bottom: 20rpx;">
				<image style="width: 100%;height:430rpx;border-radius: 30rpx 30rpx 0rpx 0rpx;" :src="tactivity[0].image_url"></image>
				<image style="position: absolute;width: 100rpx;height: 100rpx;border-radius: 100rpx;transform: translate(-50%, -50%);margin-top: 430rpx;margin-left: 82%;" :src="tactivity[0].user_avator"></image>
				<view style="display: flex; flex-flow: column nowrap;padding-bottom: 40rpx; margin-bottom: 20rpx;box-shadow:0 3px 10px #e9e9eb; border-radius: 0rpx 0rpx 10rpx 10rpx;">
					<text style="margin: 20rpx; font-size:35rpx; color:rgba(28, 28, 28, 1);font-weight: 700;">{{tactivity[0].title}}</text>
					<text style="margin: 5rpx 40rpx 20rpx 40rpx;font-size:24rpx;color:rgba(176, 176, 176, 1)">{{tactivity[0].contnent}}</text>
					<view class="footer" style="display:flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;margin:0rpx 20rpx">
						<text style="color:rgba(28, 28, 28, 1);font-size:24rpx;font-weight: 700;">查看评论</text>
						<view style="display: flex;align-items: center;">
							<image src="../../static/icon/喜欢.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
							<image src="../../static/icon/评论.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
							<image src="../../static/icon/icon_转发.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="activity-item" style=" display: flex; flex-flow: column nowrap; border-radius: 30rpx;margin-bottom: 20rpx;">
				<image style="width: 100%;height:430rpx;border-radius: 30rpx 30rpx 0rpx 0rpx;" :src="tactivity[1].image_url"></image>
				<image style="position: absolute;width: 100rpx;height: 100rpx;border-radius: 100rpx;transform: translate(-50%, -50%);margin-top: 430rpx;margin-left: 82%;" :src="tactivity[1].user_avator"></image>
				<view style="display: flex; flex-flow: column nowrap;padding-bottom: 40rpx; margin-bottom: 20rpx;box-shadow:0 3px 10px #e9e9eb; border-radius: 0rpx 0rpx 10rpx 10rpx;">
					<text style="margin: 20rpx; font-size:35rpx; color:rgba(28, 28, 28, 1);font-weight: 700;">{{tactivity[1].title}}</text>
					<text style="margin: 5rpx 40rpx 20rpx 40rpx;font-size:24rpx;color:rgba(176, 176, 176, 1)">{{tactivity[1].contnent}}</text>
					<view class="footer" style="display:flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;margin:0rpx 20rpx">
						<text style="color:rgba(28, 28, 28, 1);font-size:24rpx;font-weight: 700;">查看评论</text>
						<view style="display: flex;align-items: center;">
							<image src="../../static/icon/喜欢.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
							<image src="../../static/icon/评论.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
							<image src="../../static/icon/icon_转发.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="activity-item" style=" display: flex; flex-flow: column nowrap; border-radius: 30rpx;margin-bottom: 20rpx;">
				<image style="width: 100%;height:430rpx;border-radius: 30rpx 30rpx 0rpx 0rpx;" :src="tactivity[2].image_url"></image>
				<image style="position: absolute;width: 100rpx;height: 100rpx;border-radius: 100rpx;transform: translate(-50%, -50%);margin-top: 430rpx;margin-left: 82%;" :src="tactivity[2].user_avator"></image>
				<view style="display: flex; flex-flow: column nowrap;padding-bottom: 40rpx; margin-bottom: 20rpx;box-shadow:0 3px 10px #e9e9eb; border-radius: 0rpx 0rpx 10rpx 10rpx;">
					<text style="margin: 20rpx; font-size:35rpx; color:rgba(28, 28, 28, 1);font-weight: 700;">{{tactivity[2].title}}</text>
					<text style="margin: 5rpx 40rpx 20rpx 40rpx;font-size:24rpx;color:rgba(176, 176, 176, 1)">{{tactivity[2].contnent}}</text>
					<view class="footer" style="display:flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;margin:0rpx 20rpx">
						<text style="color:rgba(28, 28, 28, 1);font-size:24rpx;font-weight: 700;">查看评论</text>
						<view style="display: flex;align-items: center;">
							<image src="../../static/icon/喜欢.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
							<image src="../../static/icon/评论.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
							<image src="../../static/icon/icon_转发.png" style="width: 50rpx;height:50rpx;margin-left: 30rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
	
</template>

<script>

import imgGroup from './news-item.nvue'
export default {
	components: {
	    imgGroup
	},
	data(){
		return{
		tactivity: [
			{
				"image_url": "https://img1.baidu.com/it/u=615872578,2341939995&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
				"user_avator" :"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651372138&t=115361cbd4f6879510a688d6fd1429bd",
				"title":"# 2022初雪 # 福州的清晨",
				"contnent": "今天真的好幸运~出门就看到雪 ！ ！ ！ 快来一起来福州看雪吧！！"
			},
			{
				"image_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.lnstzy.cn%2Faoaodcom%2F2018-01%2F11%2F201801110217298063.jpg.h700.jpg&refer=http%3A%2F%2Fimage.lnstzy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652623766&t=7066234b73f31c35cc55414206a07794",
				"user_avator" :"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651372138&t=115361cbd4f6879510a688d6fd1429bd",
				"title":"# 2022初雪 # 向往生活",
				"contnent": "有没有小伙伴一起来滑冰！！！！ 欢迎美女姐姐加入 ！！！！ ",
			},
			{
				"image_url": "https://img1.baidu.com/it/u=2345078046,342890214&fm=253&fmt=auto&app=120&f=JPEG?w=729&h=500",
				"user_avator" :"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651372138&t=115361cbd4f6879510a688d6fd1429bd",
				"title":"# 滑板社 # 招贤纳辛",
				"contnent": "滑板社邀请你加入！！！！ 欢迎美女姐姐加入 ！！！！这里有许多帅哥和美女 ",
			},
		],
		activity:[{
			"image_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.mac69.com%2F180307%2F180307_3%2FMQstdgzZNW_small.jpg&refer=http%3A%2F%2Fphoto.mac69.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652611276&t=905e186bed48286142b89e38a385bc11",
			"style": "SPORT",
			"title": 'A man stand alone watch the full Moon Night',
			"user_avator":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12878447834%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652610923&t=cfbd0aaea45a2fd5f7455a618515eb08",
			"user_name": "vesper",
			"time": "7 Min",
			},{
			"image_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091015%2F2qzqjsuxhm52qzqjsuxhm5.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652618151&t=3960d88bee888f9ac22ac55dcf4b2e2e",
			"style": "SPORT",
			"title": 'A man stand alone watch the full Moon Night',
			"user_avator":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1031%2Fccf3810cj00r1t6hw0072c000g900hjc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652618313&t=81eab25bf1fde3f3928ef68c7e857cc5",
			"user_name": "vesper",
			"time": "7 Min",
			},
			{
				"image_url": "https://img0.baidu.com/it/u=1353410974,2698037100&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
				"style": "SPORT",
				"title": 'A beautiful women stand alone watch  Night',
				"user_avator": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0604%252Feff46629j00qu5t5c001gc000hs00m8m.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652618068&t=22d2e54333cb37ff04e489fb2dcda3bd",
				"user_name": "美女",
				"time": "11 Min",
				}
		],
		newsData:[{
			"article_type": 0,
			"title": "新生篮球赛",
	    "source": "DCloud",
      "comment_count": 639,
			"pre_count": 10,
			"user_avator": "",
			"user_name": "校篮球协会",
			"deadline": "报名时间截止至3月12日",
			"image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg"
	    },{
	    "article_type": 1,
			"title": "新生篮球赛",
	    "image_url": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F16%2F20200516232818_vlqtx.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652583480&t=70e8ad2456edf3c2fcada094381fb128",
	    "source": "DCloud",
	    "comment_count": 11395,
			"pre_count": 10,
			"user_name": "校篮球协会",
			"deadline": "报名时间截止至3月12日"
	    },{
	    "article_type": 2,
	    "title": "新生篮球赛",
	    "image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b4cd3000-517d-11eb-a16f-5b3e54966275.jpg",
	    "source": "DCloud",
	    "comment_count": 11395,
			"pre_count": 10,
			"user_name": "校篮球协会",
			"deadline": "报名时间截止至3月12日"
	    },{
	    "article_type": 3,
	    "title": "新生篮球赛",
	    "source": "DCloud",
	    "comment_count": 11,
			"pre_count": 10,
			"image_url": "https://img0.baidu.com/it/u=2442667447,2511096319&fm=253&fmt=auto&app=138&f=JPEG?w=202&h=499",
			"user_name": "校篮球协会",
			"deadline": "报名时间截止至3月12日"
	    }],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			
			scrollInto: "",
			tabIndex: 0,
			tabBars: [{
				name: '全部',
        id: 'all'
      }, {
				name: '运动',
        id: 'sport'
      }, {
        name: '学术研究',
        id: 'academic'
      }, {
				name: '旅游',
				id: 'travel'
      }, {
        name: '社团',
        id: 'organization'
      }, {
        name: '拼车',
        id: 'car'
			}]
		}
	},
	methods: {
		tabclick(index){
			this.tabIndex=index;
		}
	}
}
</script>

<style lang="scss">
	.line {
	  position: relative;
	  margin: 0 auto;
	  width: 100%;
	  height: 1px;
	  background-color: #d4d4d4;
	  text-align: center;
	  font-size: 20px;
	  color: rgba(101, 101, 101, 1);
	  margin-bottom: 20px;
	}
	.swiper{
		// margin-top: 20rpx;
		background-color: #FFFFFF;
		height:460rpx;
		width: 100%;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		
	}
	.page{
		// padding-top: 20rpx;
		background-color:  #e9e9eb;
	}
	.search{
		background-color:#FFFFFF;
		padding: 20rpx;
		padding-bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.moon{
			padding: 0rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}
	.tabbar{
		// display: flex;
		padding: 10rpx;
		background-color: #FFFFFF;
	  width: 750rpx;
		width:100%;
		height: 70rpx;
	  flex-direction: row;
    white-space: nowrap;
	}
	.tab-item{
		display: inline-block;
		flex-wrap: nowrap;		
		 // white-space: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}
	.tab-item-title {
	    color: #555;
	    font-size: 30rpx;
	    height: 40rpx;
	    line-height: 80rpx;
	    flex-wrap: nowrap;
	    white-space: nowrap;
	}
	.tab-item-item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tab-item-title-active {
	    color: #007AFF;
	}
	.tab-item-bottom{
		color: #FFFFFF;
	}
	.tab-item-bottom-active{
		color: #007AFF;
	}
	.hot-activity{
		background-color: #FFFFFF; 
		margin-bottom: 20rpx;
		padding:20rpx;
		display:flex;
		flex-direction: column;
		.title{
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 20rpx
		}
		.hot-content{
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 20rpx;
			// align-items: center;
			.content{
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
			}
		}
	}
	.activity-content{
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.activity-introduction{
		display: flex;
		flex-flow: row nowrap;
		.content{
			margin: 10rpx 0rpx;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			.footer{
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
			}
		}
	}
</style>
